<template>
  <YsRow>
    <p class="img-title text_01">检测部位及缺陷位置实物图：</p>
    <div class="img-box">
      <template>
        <div class="demo-upload-list" v-for="item in fileInfos">
          <img :src="setPath(item)">
          <div class="demo-upload-list-cover">
            <YsIcon type="ios-eye-outline" @click.native="handleView(item.file_url)"></YsIcon>
            <YsIcon type="ios-trash-outline" @click.native="handleRemove(item)"></YsIcon>
          </div>
        </div>
        <YsUpload :action="fileupload.uploadpath" ref="upload" :format="['jpg', 'jpeg', 'png', 'dcm']" :show-upload-list="false" :default-file-list="defaultList" :on-exceeded-size="handleMaxSize" :before-upload="uploadProcessThen"
          :on-success="(res, file, fileList) => handleSuccess(res, file, fileList, fileupload.upload_path)" :on-remove="(res, file, fileList) => handleRemove(res, file, fileList)" :on-format-error="handleFormatError" multiple type="drag"
          class="demo-upload-all border_style">
          <div class="demo-upload-add">
            <YsIcon type="ios-camera" size="20"></YsIcon>
          </div>
        </YsUpload>
        <YsModal class="visible-img" v-model="visible">
          <img :src="imgName" v-if="visible" style="width: 100%">
          <!-- <div class="visible-box">
            <span class="icon iconfont icon-sousuo"></span>
            <span class="icon iconfont icon-sousuo"></span>
            <span class="icon iconfont icon-sousuo"></span>
            <span class="icon iconfont icon-sousuo"></span>
            <span class="icon iconfont icon-sousuo"></span>
          </div> -->
        </YsModal>
      </template>
    </div>
  </YsRow>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
  name: 'threeTemplate',
  props: {
    templateBean: {
      type: Object,
      default: () => {
        return {

        }
      }
    },
    reportDataBean: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  watch: {
    templateBean(v) {
      if (v && v.templateFields3) {
        this.templateFields3 = v.templateFields3
      }
    },
    reportDataBean(v) {
      if (v) {
        if (v.table_field_data3) {
          this.fileInfos = []
          for (let i = 0; i < v.table_field_data3.length; i++) {
            let file_name = v.table_field_data3[i].values[0].value.split("/").pop()
            this.fileInfos.push({
              row_id: v.table_field_data3[i].row_id,
              file_name: file_name,
              file_url: v.table_field_data3[i].values[0].value
            })
          }
        }
      }
    },
  },
  data() {
    return {
      fileCurrent: [],
      templateFields3: [],
      operatorType: 1,
      fileupload: {
        type: null, //类型
        uploadpath: "", //路径
        upload_name: "", //名字
        upload_path: "",
        data: {},
        name: "",
      },
      fileInfos: [],
      defaultList: [],
      operateTelData: [],
      imgName: '',
      visible: false,
      uploadList: []
    }

  },
  mounted() {
    this.uploadList = this.$refs.upload.fileList;
  },
  methods: {
    ...mapActions(["setTempUploadDir"]),
    //查看大图
    handleView(name) {

      this.imgName = `${window.GlobalConfig.serviceProxy.BaseUrl}${name}`;
      this.visible = true;
    },
    //删除图片
    handleRemove(file) {
      const fileList = this.$refs.upload.fileList;
      this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
      let index = this.fileInfos.findIndex((itm) => { return itm.file_name == file.file_name })
      if (index == -1) return
      this.fileInfos.splice(index, 1)
      this.operateTelData.push({
        id: file.row_id,
        file_id: this.$route.query.file_id,
        tp_id: this.$route.query.template_id,
        data_class: this.templateFields3[0].field_class,
        tf_id: this.templateFields3[0].id,
        operator_type: 2,
        reportDetailBeans: [
          {
            id: "",
            field_id: this.templateFields3[0].field_id,
            report_val: file.file_url
          }
        ]
      })
    },
    //提交报错
    handleFormatError(file) {

    },
    //上传成功
    handleSuccess(res, file, fileList, text_path) {
      this.fileInfos = [...this.fileInfos, ...this.fileCurrent]
      this.fileCurrent=[]
    },
    //大小
    handleMaxSize(file) {

    },
    //获取上传地址
    async uploadProcessThen(res, file) {

      this.fileupload.type = res.type; //上传类型
      this.fileupload.upload_name = res.name;
      this.fileupload.author = res.name;
      let imgFolder = await this.setUpload()
      this.fileupload.upload_path = imgFolder.upload_path
      this.fileupload.uploadpath = `${window.GlobalConfig.serviceProxy.BaseUrl}fileupload?uploadPath=${imgFolder.upload_path}`
      this.fileCurrent.push({ file_url: `webDownLoad/${imgFolder.upload_path}/${res.name}`, file_name: `${res.name}` })
    },
    //手动打开页面
    async setUpload() {
      let _this = this;
      return new Promise((resolve, reject) => {
        _this.setTempUploadDir().then((res) => {
          let { data, msg, scode, status } = res;
          if (data.upload_absolute_path && data.upload_path) {
            resolve(data);
          } else {
            reject(null);
          }
        });
      });
    },
    //提交颜色
    getoPerateImg() {
      if (this.templateFields3.length > 0) {
        let item = this.templateFields3[0]
        this.fileInfos.map(v => {
          if (!v.row_id) {
            this.operateTelData.push({
              file_id: this.$route.query.file_id,
              tp_id: this.$route.query.template_id,
              data_class: item.field_class,
              tf_id: item.id,
              operator_type: 1, //操作标识：1-新增，2-删除，编辑可随意传
              reportDetailBeans: [
                {
                  id: "",
                  field_id: item.field_id,
                  report_val: v.file_url
                }
              ]
            })
          }
        })
      } else {
        this.$YsMessage.error("未获取到上传数据");
      }
    },
    //设置路径
    setPath(path) {
      return `${window.GlobalConfig.serviceProxy.BaseUrl}${path.file_url}`
    }
  }
}
</script>
<style scoped lang='less'>
.img-title {
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 400;
  // line-height: 60px;
  color: #405580;
  margin-bottom: 16px;
}
.img-box {
  display: flex;

  opacity: 1;
  border-radius: 4px;
  .img-left {
    flex: 1;
    border-radius: 4px;
    height: 192px;
    margin-right: 16px;
    border: 1px solid #cfd7e5;
  }
  .img-right {
    flex: 1;
    border-radius: 4px;
    border: 1px solid #cfd7e5;
    height: 192px;
  }
}

.demo-upload-list {
  display: inline-block;
  min-width: 60px;
  flex: 1;
  height: 194px;
  text-align: center;
  line-height: 190px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  margin-right: 4px;
}
.demo-upload-all {
  flex: 1;
  text-align: center;
  display: inline-block;
  border: 1px solid #cfd7e5;
  .demo-upload-add {
    width: 58px;
    margin: 0 auto;
    height: 190px;
    line-height: 190px;
  }
}

.demo-upload-list img {
  width: 100%;
  height: 100%;
}
.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}
.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}
.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}

.visible-img {
  /deep/ .ivu-modal {
    width: 60% !important;
    // height: 50vh;
  }
  /deep/.ivu-modal-footer {
    display: none;
  }
  /deep/.ivu-modal-body {
    padding: 0;
  }
  /deep/.ivu-modal-close {
    display: none;
  }
  /deep/.ivu-modal-content {
    background: transparent;
    box-shadow: none;
  }
  .visible-box {
    width: 286px;
    height: 40px;
    margin: 26px auto 150px;
    background: rgba(255, 255, 255, 1);
    opacity: 1;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  
}
</style>
